<template>
    <div class="box">
        <el-row :gutter="20">
            <el-col :span="6" class="picture">
                <div class="grid-content bg-purple">
                    <img :src="imgSrc" class="image _img">
                </div>
            </el-col>

            <el-col :span="14" class="content items">
                <div class="grid-content bg-purple re">

                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content bg-purple name">
                                {{ PlantInfo.totanyName }}
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <!-- <div class="grid-content bg-purple-light right">
                                <el-button type="primary">返回<i class="el-icon-arrow-right el-icon--right"></i> 
                                </el-button>
                            </div> -->
                        </el-col>
                    </el-row>
                    <P class="info">别名：{{ PlantInfo.anotherName }}</P>
                    <p class="info">发布时间：{{ PlantInfo.luchTime }}</p>
                    <el-divider></el-divider>
                    <P>{{ PlantInfo.totancyCont }}</P>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getPicture } from "@/api/index"
// import { page } from "@/api/plantApi";

const options = {
    data() {
        return {
            imgSrc: null,
            PlantInfo: {
                pictureUrl: "",
                totanyName: "",
                anotherName: "",
                luchTime: "",
                totancyCont: ""
            }
        }
    },
    computed: {
        plant() {
            return this.$store.state.plant ?? JSON.parse(localStorage.getItem("plant"));
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            if (!this.plant) {
                this.$message.error("获取数据出错了");
                return;
            }
            this.getImage(this.plant);
            this.PlantInfo = this.plant;
        },
        getImage(item) {
            let that = this;
            getPicture(item.pictureUrl).then((resp) => {
                let url = window.URL.createObjectURL(resp.data);
                that.imgSrc = url;
                // console.log(url);
            })
        }
    }
}
export default options;
</script>

<style>
.el-col {
    border-radius: 4px;
}

.picture {
    margin-top: 100px;
    margin-left: 10%;
}

.content {
    margin-top: 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    height: 100%;
    width: 50%;
}

.bg-purple-dark {
    background: #99a9bf;
}

.right {
    margin-left: 75%;
}

.info {
    color: #909399;
}

.box {
    height: 100%;
    padding-bottom: 7%;
    border-radius: 30px;
    background: url('@/assets/images/plantInfoBcg/plantBackground.png') no-repeat;
    background-size: 100% 100%;
}

.items {
    background-color: #fff;
}

._img {
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    max-height: 300px;
}

.name {
    font-size: 28px;
    font-family: "Hiragino Sans GB";
}
</style>